<template>
    <div class="main">
        <div class="breadcrumb">
            <el-breadcrumb>
                <el-breadcrumb-item>
                    <el-icon>
                        <HomeFilled/>
                    </el-icon>
                </el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row>
            <el-col :span="6">
                <el-card class="box_left">
                    <el-space direction="vertical">
                        <el-upload :action="BaseConfig.fileUploadURL" :before-upload="beforeAvatarUpload"
                                   :headers="tokenHeader"
                                   :on-success="handleAvatarSuccess" :show-file-list="false" class="avatar-uploader">
                            <el-avatar :size="100" :src="`/api/images/${info.picture}`" shape="circle"/>
                        </el-upload>
                        <el-text truncated type="info">
                            <el-icon>
                                <Bell/>
                            </el-icon>
                            {{ info.remark }}
                        </el-text>
                        <el-text truncated>
                            <el-icon>
                                <UserFilled/>
                            </el-icon>
                            {{ info.username }}
                        </el-text>
                        <el-text truncated>
                            <el-icon>
                                <Message/>
                            </el-icon>
                            {{ info.email }}
                        </el-text>
                        <el-text truncated>
                            <el-icon>
                                <Iphone/>
                            </el-icon>
                            {{ info.telephone }}
                        </el-text>
                        <el-text truncated>
                            <el-icon>
                                <Key/>
                            </el-icon>
                            {{ info.idCard }}
                        </el-text>
                        <el-text truncated>
                            <el-icon>
                                <Location/>
                            </el-icon>
                            {{ info.address }}
                        </el-text>
                    </el-space>
                </el-card>
            </el-col>
            <el-col :span="3"/>
            <el-col :span="15">
                <el-card style="width: 90%; height: 350px" wrap>
                    <el-tabs v-model="activeName" class="demo-tabs">
                        <el-card>
                            <el-tab-pane label="账号设置" name="first">
                                <staffForm/>
                            </el-tab-pane>
                            <el-tab-pane v-if="info.bool" label="物资申领状态" name="two">
                                <ClaimTable/>
                            </el-tab-pane>
                            <el-tab-pane v-if="info.bool" label="建议提交" name="three">
                                <adviseForm/>
                            </el-tab-pane>
                        </el-card>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang='ts' setup>
// MARK 2023-4-12 10:10:考虑不使用本地存储信息
import { ref } from 'vue'
import { Notification } from '@/plugins/element'
import { Bell, HomeFilled, Iphone, Key, Location, Message, UserFilled } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useStaff, useToken } from '@/store'
import { BaseConfig } from '@/config/config'
import StaffForm from '@/components/Base/staffForm.vue'
import AdviseForm from '@/components/Base/adviseForm.vue'
import ClaimTable from '@/components/Base/claimTable.vue'

const Token = useToken()
const tokenHeader = { Authorization: Token.token }
const Staff = useStaff()
const { info } = storeToRefs(Staff)
const activeName = ref('first')
const handleAvatarSuccess: UploadProps['onSuccess'] = response => {
  const { message, data } = response
  Notification.success(message)
  Staff.changePicture(data.picture)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
  if (rawFile.size / 1024 / 1024 > 2) {
    Notification.error('上传文件的大小必须小于2MB')
    return false
  }
  return true
}
</script>

<style lang='scss' scoped>
.breadcrumb {
  margin: 15px 0;
}

.el-text {
  font-size: 16px;
  margin: 5px 0;
}

.box_left {
  text-align: center;
}

.avatar {
  width: 170px;
}
</style>